<template>
  <div>
    <el-header class="el-header2" height="35px">
      <el-breadcrumb
        style="margin-left: 10px"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>数据统计</el-breadcrumb-item>
        <el-breadcrumb-item>统计报表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-card style="height: 600px">
      <el-card class="mycard1">
        <h3>商品售出详情</h3>
        <el-divider></el-divider>
        <h4>截止</h4>
        <em>{{ mydate }}/</em>
        <br />
        <br />
        <i class="el-icon-s-marketing" /> 商品累计 <strong>售出图</strong> 如右
        <br />
        <br />
        <i class="el-icon-info" /> 点击 导出 可以导出excel
      </el-card>
      <div id="myChart" :style="{ width: '400px', height: '350px' }"></div>
    </el-card>
  </div>
</template>

<script>
// import echarts from "echarts";

export default {
  data() {
    // this.getAllPowers();
    return {
      sortlist: [111],
    };
  },
  computed: {
    mydate: function () {
      const str = new Date().toLocaleString();
      return str;
    },
  },
  methods: {
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    async getSort() {
      console.log(555, this.sortlist);
    },
    async drawLine() {
      let self = this;
      const { data } = await this.axios({
        method: "get",
        url: "/order/sort/",
      });
      const res = JSON.parse(JSON.stringify(data));
      // this.$set(this.sortlist, res);
      this.sortlist = res;
      // console.log(echarts);
      // var chartDom = document.getElementById("myChart");
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      var option;

      option = {
        title: {
          text: "商品售出详情",
          left: "center",
          bottom: 0,
          textStyle: {
            fontSize: 20,
          },
        },

        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "占比",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "25",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            // data: [
            //   { value: 1048, name: "搜索引擎" },
            //   { value: 735, name: "直接访问" },
            //   { value: 580, name: "邮件营销" },
            //   { value: 484, name: "联盟广告" },
            //   { value: 300, name: "视频广告" },
            // ],
            data: this.sortlist,
          },
        ],
        toolbox: {
          feature: {
            myTool1: {
              show: true,
              title: "导出",
              icon:
                "path://M938.855808 638.776382l0 270.299169c0 27.41028-22.210861 49.634444-49.621141 49.634444l-754.442728 0c-27.41028 0-49.647747-22.224164-49.647747-49.634444L85.144192 638.776382c0-27.41028 22.224164-49.634444 49.634444-49.634444s49.634444 22.224164 49.634444 49.634444l0 220.664725 655.17384 0L839.58692 638.776382c0-27.41028 22.224164-49.634444 49.634444-49.634444S938.855808 611.366102 938.855808 638.776382zM476.55165 701.027168c9.335622 9.534144 22.116717 14.905478 35.46063 14.905478 13.344936 0 26.121937-5.371334 35.461653-14.905478l198.014866-202.167442c19.179828-19.583011 18.85544-51.006697-0.732687-70.190619-19.587104-19.175735-51.016931-18.85544-70.196759 0.731664l-112.924909 115.285676L561.634444 114.924449c0-27.41028-22.224164-49.634444-49.634444-49.634444-27.41028 0-49.634444 22.224164-49.634444 49.634444l0 429.754834L349.473393 429.40077c-19.179828-19.583011-50.590212-19.902282-70.186526-0.731664-19.583011 19.179828-19.910469 50.603515-0.730641 70.190619L476.55165 701.027168z",
              onclick: function () {
                // alert('myToolHandler1')
                console.log(self.sortlist);
                let tHeader, filterVal, list;
                // console.log(self.chartData)
                // console.log(list)
                tHeader = ["名称", "数量"];
                filterVal = ["name", "value"];
                list = self.sortlist;

                const data = self.formatJson(filterVal, list);
                // console.log(data)
                import("@/vendor/Export2Excel").then((excel) => {
                  excel.export_json_to_excel({
                    header: tHeader,
                    data,
                    filename: "报表",
                  });
                });
              },
            },
          },
        },
      };

      option && myChart.setOption(option);
    },
  },
  async created() {
    // console.log(this.$store.getters.getUserInfoName);
    // await this.getSort();
  },
  mounted() {
    // console.log(echarts);
    this.drawLine();
    // console.log(666);
    // console.log(this.sortlist);
    console.log(this.$store.getters.getUserInfoRoleid);
  },
};
</script>

<style lang="scss" scoped>
#myChart {
  // position: relative;
  // // left: 1000px;
  // margin: 0 auto;
  // display: flex;
  // justify-items: center;
  // align-items: center;
  margin: 0 auto;
  overflow: visible;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  transform: translate(-7%, 20%);
}
.mycard1 {
  position: absolute;
  width: 300px;
  height: 300px;
}
</style>
